<template>
  <div class="container user-container">
    <div class="user-box" v-if="userInfo">
      <div class="uaer-info">
        <img mode="widthFix" class="avatar" :src="userInfo.headimg" alt="">
        <div class="user-details">
          <p class="user-name">{{userInfo.nickname}}</p>
          <p class="user-type">{{userInfo.level}}</p>
          <p class="user-id">ID：{{userInfo.ID}}</p>
        </div>
      </div>
      <div class="distribution-btn" @click="$router.push({ path: '/pages/distribution/distribution'})">
        <img mode="widthFix" src="../../../static/images/distribution-btn.png" alt="">
      </div>
    </div>
    <div class="user-box" v-if="userInfo">
      <div class="user-account">
        <div class="user-account-item" @click="$router.push({ path: '/pages/wallet/wallet'})">
          <p class="user-account-number">{{userInfo.user_money}}</p>
          <p class="user-account-type">余额</p>
        </div>
        <div class="user-account-item" @click="$router.push({ path: '/pages/reds/reds'})">
          <p class="user-account-number">{{userInfo.red_package}}</p>
          <p class="user-account-type">红包</p>
        </div>
        <div class="user-account-item" @click="$router.push({ path: '/pages/integral/integral'})">
          <p class="user-account-number">{{userInfo.pay_points}}</p>
          <p class="user-account-type">积分</p>
        </div>
        <div class="user-account-item" @click="$router.push({ path: '/pages/coupons/coupons'})">
          <p class="user-account-number">{{couponsList?couponsList.length:'0'}}</p>
          <p class="user-account-type">优惠券</p>
        </div>
      </div>
    </div>
    <div class="ant-panel" v-if="userInfo">
      <div class="ant-panel-head" @click="$router.push({ path: '/pages/orderList/orderList'})">
        <p class="ant-panel-title">我的订单</p>
        <div class="ant-panel-extra">
          <p class="ant-panel-extra-text">查看全部订单</p>
          <img mode="widthFix" class="ant-panel-extra-icon" src="../../../static/images/icon-next.png" />
        </div>
      </div>
      <div class="ant-panel-body">
        <div class="ant-grid-list">
          <div class="ant-grid-item" @click="$router.push({ path: '/pages/orderList/orderList',query:{status:1}})">
            <i-badge :count="userInfo.countInfo.unpayCount">
              <img mode="widthFix" class="ant-grid-icon" src="../../../static/images/icon-daifukuan.png" />
              <p class="ant-grid-text">待付款</p>
            </i-badge>
          </div>
          <div class="ant-grid-item" @click="$router.push({ path: '/pages/orderList/orderList',query:{status:2}})">
            <i-badge :count="userInfo.countInfo.undeliverCount">
              <img mode="widthFix" class="ant-grid-icon" src="../../../static/images/icon-daifahuo.png" />
              <p class="ant-grid-text">待发货</p>
            </i-badge>
          </div>
          <div class="ant-grid-item" @click="$router.push({ path: '/pages/orderList/orderList',query:{status:3}})">
            <i-badge :count="userInfo.countInfo.deliveringCount">
              <img mode="widthFix" class="ant-grid-icon" src="../../../static/images/icon-faishouhuo.png" />
              <p class="ant-grid-text">待收货</p>
            </i-badge>
          </div>
          <div class="ant-grid-item" @click="$router.push({ path: '/pages/orderList/orderList',query:{status:4}})">
            <i-badge :count="userInfo.countInfo.unevalCount">
              <img mode="widthFix" class="ant-grid-icon" src="../../../static/images/icon-daipingjia.png" />
              <p class="ant-grid-text">待评价</p>
            </i-badge>
          </div>
          <i-badge :count="userInfo.countInfo.returnCount">
            <div class="ant-grid-item" @click="$router.push({ path: '/pages/exchange/exchange'})">
              <img mode="widthFix" class="ant-grid-icon" src="../../../static/images/iocn-tuihuanhuo.png" />
              <p class="ant-grid-text">退换货</p>
            </div>
          </i-badge>
        </div>
      </div>
    </div>
    <div class="blank-spaces"></div>

    <div class="ant-panel">
      <div class="ant-panel-head">
        <p class="ant-panel-title">更多</p>
      </div>
      <div class="ant-panel-body">
        <div class="ant-grid-list">
          <div class="ant-grid-item" @click="$router.push({ path: '/pages/collection/collection'})">
            <i-badge>
              <img mode="widthFix" class="ant-grid-icon" src="../../../static/images/icon-me-shouceng.png" />
              <p class="ant-grid-text">我的收藏</p>
            </i-badge>
          </div>
          <div class="ant-grid-item" @click="$router.push({ path: '/pages/address/address'})">
            <i-badge>
              <img mode="widthFix" class="ant-grid-icon" src="../../../static/images/icon-me-dizhi.png" />
              <p class="ant-grid-text">地址管理</p>
            </i-badge>
          </div>
          <div class="ant-grid-item" @click="$router.push({ path: '/pages/inviteFriends/inviteFriends'})">
            <!-- <i-badge count="10元红包"> -->
            <i-badge>
              <img mode="widthFix" class="ant-grid-icon" src="../../../static/images/icon-me-tuijian.png" />
              <p class="ant-grid-text">邀请好友</p>
            </i-badge>
          </div>
          <!-- <div class="ant-grid-item" @click="getServiceStoreCheck" > -->
          <div class="ant-grid-item" @click="getServiceStoreCheck" v-if="userInfo&&userInfo.is_on_shop">
            <i-badge count="限时免费">
              <img mode="widthFix" class="ant-grid-icon" src="../../../static/images/icon-me-ruzhu.png" />
              <p class="ant-grid-text">我要入驻</p>
            </i-badge>
          </div>
        </div>
      </div>
    </div>
    <div class="blank-spaces"></div>
    <div class="ant-panel">
      <div class="ant-panel-head">
        <p class="ant-panel-title">我的服务</p>
      </div>
      <div class="ant-panel-body">
        <div class="ant-grid-list">
          <div class="ant-grid-item">
            <i-badge>
              <img mode="widthFix" class="ant-grid-icon" src="../../../static/images/icon-me-gonggao.png" />
              <p class="ant-grid-text">平台公告</p>
            </i-badge>
          </div>
          <div class="ant-grid-item">
            <button open-type="contact">
              <i-badge>
                <img mode="widthFix" class="ant-grid-icon" src="../../../static/images/icon-me-kefu.png" />
                <p class="ant-grid-text">在线客服</p>
              </i-badge>
            </button>
          </div>
          <div class="ant-grid-item">
            <i-badge>
              <img mode="widthFix" class="ant-grid-icon" src="../../../static/images/icon-me-bangzhu.png" />
              <p class="ant-grid-text">帮助中心</p>
            </i-badge>
          </div>
          <div class="ant-grid-item" @click="$router.push({ path: '/pages/stomeHome/stomeHome'})" >
          <!-- <div class="ant-grid-item" @click="$router.push({ path: '/pages/stomeHome/stomeHome'})" v-if="userInfo&&userInfo.is_on_shop"> -->
            <i-badge>
              <img mode="widthFix" class="ant-grid-icon" src="../../../static/images/icon-me-shangjia.png" />
              <p class="ant-grid-text">我是商家</p>
            </i-badge>
          </div>
        </div>
      </div>
    </div>
    <div class="blank-spaces"></div>
    <i-action-sheet :visible="shopSheetCisible" :actions="shopSheet" show-cancel @cancel="shopSheetCancel" @iclick="shopSheetClick" />
    <i-toast id="toast" />
        <van-dialog id="van-dialog" />

  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  const {
    $Toast
  } = require("@/../static/iview/base/index");
  import Dialog from "@/../static/vant/dialog/dialog";
  import request from "@/api/request";
  import {
    getUserInfo,
    getCollects,
    getCouponsList,
    copyClipboard
  } from '@/utils/index'
  export default {
    data() {
      return {
        shopSheetCisible: false,
        shopSheet: [{
            name: '拨打电话：18859555677',
            phone: '拨打电话：18859555677'
          },
          {
            name: '添加微信：weixin233',
            wx: 'weixin233'
          },
        ],
      }
    },
    props: ['toast'],
    computed: {
      ...mapState(['userInfo', 'collectsList', 'couponsList'])
    },
    methods: {
      ...mapMutations(['setUserInfo', 'setCollectsList', 'setCouponsList']),
      openShopSheet() {
        this.shopSheetCisible = true
      },
      shopSheetCancel() {
        this.shopSheetCisible = false
      },
      shopSheetClick(e) {
        switch (e.mp.detail.index) {
          case 0:
            wx.makePhoneCall({
              phoneNumber: this.shopSheet[e.mp.detail.index].phone,
            })
            break;
          case 1:
            copyClipboard(this.shopSheet[e.mp.detail.index].wx)
            break;
        }
        this.shopSheetCancel()
      },
      changeBannerStatus(val) {
        this.bannerStatus = val
      },
      getServiceStoreCheck() {
        request.getServiceStoreCheck().then(res => {
          console.log(res)
          if (res.code == 0) {
            this.$router.push({
              path: '/pages/entering/entering'
            })
          } else {
            Dialog.confirm({
              title: '系统提示',
              message: res.message
            })
            .then(() => {
              // on confirm

            })
            .catch(() => {
              // on cancel
            });
          }
           
        }).catch(res => {
          Dialog.confirm({
              title: '系统提示',
              message: res.message
            })
            .then(() => {
              // on confirm

            })
            .catch(() => {
              // on cancel
            });
        })
      }
    },
    mounted() {
      getUserInfo()
      getCollects()
      getCouponsList()
    },
  }

</script>

<style lang="less">
  .user-container {}

  .user-box {
    width: 100%;
    background: rgba(249, 249, 249, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .uaer-info,
    .user-account {
      display: flex;
      align-items: center;
    }

    .uaer-info {
      padding: 30rpx;

      .avatar {
        display: block;
        width: 100rpx;
        height: 100rpx;
        margin-right: 30rpx;
        background: #fff;
        border-radius: 50rpx;
        overflow: hidden;
      }

      .user-details {
        display: flex;
        flex-direction: column;

        .user-name {
          line-height: 1em;
          font-size: 34rpx;
          color: rgba(64, 64, 64, 1);
          margin-bottom: 20rpx;
        }

        .user-type {
          line-height: 1em;
          font-size: 26rpx;
          color: rgba(64, 64, 64, 1);
          margin-bottom: 10rpx;
        }

        .user-id {
          line-height: 1em;
          font-size: 26rpx;
          font-family: PingFang-SC-Medium;
          color: rgba(64, 64, 64, 1);
        }
      }
    }

    .user-account {
      flex: 1;
      background: #fff;
      border-bottom: 1px solid #F9F9F9;

      .user-account-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30rpx;

        .user-account-number {
          line-height: 1em;
          font-size: 30rpx;
          color: rgba(238, 117, 89, 1);
          margin-bottom: 14rpx;
        }

        .user-account-type {
          line-height: 1em;
          font-size: 24rpx;
          color: rgba(160, 160, 160, 1);
        }
      }
    }
  }

  .list-wrap {
    width: 100%;
  }

  .list-item {
    background: #fff;
  }

  .list-item:last-child {
    margin: 0;
  }

  .item {
    flex: 1;
  }


  .van-cell__value.unauthorized {
    color: #EE7559;
  }

  .distribution-btn {
    width: 75px;
    height: 35px;
    margin-right: 15px;

    img {
      width: 75px;
      height: 35px;
    }
  }

  .ant-grid-item {
    button {
      background: none;
      border: 0;
      padding: 0;

      &::after {
        display: none;
      }

      &::before {
        display: none;
      }
    }
  }

</style>
